<template>
  <div class="allBox">
    <!-- 计价页面部份 -->
    <van-nav-bar :fixed="true" title="购物车页面" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <!-- 列表 -->
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <van-cell v-for="item in ShopProductList" :key="item.id">
          <!-- 选中得商品 -->
          <div class="p-price">
            <van-swipe-cell >
              <van-card
                :num="item.cou"
                :title="item.title"
                :thumb="item.thumb_path"
                :lazy-load="true"
              >
                <template #price>
                  <span style="color:red">￥{{item.sell_price}}</span>
                </template>
                <template #footer>
                  <!-- 表单 -->
                  <van-field name="stepper" input-align="right">
                    <template #input>
                      <van-stepper
                        @change="stepperInputChange(item.cou,item.id)"
                        v-model="item.cou"
                      />
                    </template>
                  </van-field>
                </template>
              </van-card>
              <!-- 删除 -->
              <template #right>
                <van-button @click="clickRemove(item.id)" square text="删除" type="danger" class="delete-button" />
              </template>
            </van-swipe-cell>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <!-- 底部 -->
    <div class="foot">
      <van-button :block="false">
        合计：
        <span style="color:red;font-size:16px">￥{{count+'.00'}}</span>
      </van-button>
      <van-button type="danger" :block="false" @click="goSubmitOrder(count)">提交订单</van-button>
    </div>
    <common-footer></common-footer>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      // 下拉刷新
      isLoading: false,
      // 购物车商品信息列表
      ShopProductList: [],
      // 下拉列表
      loading: false,
      finished: false
    }
  },
  mounted () {
    this.getArrId()
    this.getShopProductList()
  },
  computed: {
    ...mapState(['goodsCar']),
    count () {
      console.log(this.ShopProductList)
      var totalPrice = 0
      this.ShopProductList.forEach((item) => {
        totalPrice += item.cou * item.sell_price
      })
      return totalPrice
    }
  },
  methods: {
    ...mapMutations(['changeCartsData', 'removeCartsGoods']),
    getArrId () {
      const arrId = []
      const carts = JSON.parse(window.localStorage.getItem('cartsId'))
      carts.goodCar.forEach((item) => {
        arrId.push(item.id)
      })
      return arrId
    },
    // 下拉刷新
    onRefresh () {
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    },
    // 返回链接
    onClickLeft () {
      this.$router.go(-1)
    },
    // 获取购物车商品信息
    async getShopProductList () {
      // 判断是否有加入的商品，没有就退出
      if (this.getArrId().length <= 0) {
        this.$toast('请去选择商品加入购物车吧！')
        this.$router.push('/goods')
        return
      }
      // window.localStorage.setItem('cartId', this.arrId)
      // 根据全局数量，获取购物车里面的数据
      const { data: res } = await this.$http.get(
        '/api/goods/getshopcarlist/' + this.getArrId().join(',')
      )
      // 让加购的数量保持不变
      const arrCarts = JSON.parse(window.localStorage.getItem('cartsId'))
      res.message.forEach((item) => {
        if (this.getArrId().indexOf(item.id) !== -1) {
          arrCarts.goodCar.forEach((item2) => {
            if (item2.id === item.id) {
              item.cou = item2.num
            }
          })
        }
      })
      this.ShopProductList = res.message
    },
    // 数据加载完成
    onLoad () {
      setTimeout(() => {
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.ShopProductList.length) {
          this.finished = true
        }
      }, 1000)
    },
    // 点击增加数量的时候变化
    stepperInputChange (val, id) {
      this.changeCartsData({ id: id, num: val })
      this.getShopProductList()
    },
    // 点击删除
    clickRemove (id) {
      this.removeCartsGoods(id)
      this.getArrId()
      this.getShopProductList()
      if (this.getArrId().length <= 0) {
        this.$toast('购物车空空如也！')
        this.$router.push('/shop')
      }
    },
    // 点击提交订单
    goSubmitOrder (count) {
      this.$router.push('/order/1')
      window.localStorage.setItem('submitOrder', 1)
    }

  }
}
</script>
<style lang="less" scoped>

/deep/ .van-nav-bar .van-icon {
  color: #fff !important;
}
/deep/.van-nav-bar__text {
  color: #fff !important;
}
/deep/.van-nav-bar__title {
  color: #fff !important;
}
.van-card__content {
  justify-content: flex-start;
}
.allBox,
.van-pull-refresh,
.p-price {
  height: 100%;
}
/deep/.van-list {
  margin-top: 60px;
}
.van-nav-bar {
  background-color: #1989fa;
}
.van-button {
  background-color: #f2f3f5;
}
.van-cell {
  background-color: #fafafa;
  padding: 0;
}
.van-cell {
  margin: 10px 0;
}
.van-button--danger {
  background-color: red;
  border: 1px solid red;
}
.van-button--default {
  background-color: #fff;
  border: 1px solid #fff;
}
.foot {
  position: fixed;
  bottom: 60px;
  right: 10px;
  background-color: #fff;
}
.van-card__title {
  font-size: 14px;
}
.van-card__thumb {
  width: 100px;
  height: 100px;
  margin-right: 15px;
}
.delete-button {
  height: 100%;
  // width: 30%;
}
/deep/ .van-card {
  background-color: transparent;
}
</style>
